<template >
  <div class="count_class" >
      <el-row>
          <el-col :span="14" :offset="4">
              <el-form ref="formdata" :model="form" label-width="100px">
                  <el-form-item prop="projectName" label="项目名称">
                      <el-input v-model="form.projectName"></el-input>
                  </el-form-item>
                  <el-form-item prop="region" label="项目类型">
                      <el-select v-model="form.region" placeholder="请选择活动区域">
                      <el-option label="类型一" value="shanghai"></el-option>
                      <el-option label="类型二" value="beijing"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item prop="date1" label="开始时间">
                      <el-col :span="11">
                      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                      </el-col>
                  </el-form-item>
                  <el-form-item label="二维码类型">
                    <el-select clearable v-model="selcodetype" placeholder="请选择">
                      <el-option
                        v-for="item in basic.codetype"
                        :key="item.dict_key"
                        :label="item.dict_value"
                        :value="item.dict_value">
                      </el-option>
                    </el-select>
                   </el-form-item>
                  <el-form-item prop="delivery" label="是否混匀">
                      <el-switch v-model="form.delivery"></el-switch>
                  </el-form-item>
                  <el-form-item prop="type" label="数据分析">
                      <el-checkbox-group v-model="form.type">
                      <el-checkbox label="结果一" name="type"></el-checkbox>
                      <el-checkbox label="结果二" name="type"></el-checkbox>
                      <el-checkbox label="结果三" name="type"></el-checkbox>
                      <el-checkbox label="结果四" name="type"></el-checkbox>
                      </el-checkbox-group>
                  </el-form-item>
                  <el-form-item prop="resource" label="是否急诊">
                      <el-radio-group v-model="form.resource">
                      <el-radio label="是"></el-radio>
                      <el-radio label="否"></el-radio>
                      </el-radio-group>
                  </el-form-item>
                  <el-form-item prop="desc" label="备注">
                      <el-input type="textarea" v-model="form.desc"></el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="createPDF417">立即创建</el-button>
                      <el-button  @click="resetForm('formdata')">重置</el-button>
                      <el-button type="primary"  v-print="printObj">打印</el-button>
                  </el-form-item>
                  </el-form>
          </el-col>
      </el-row>
      <el-row>
          <el-col id="myPrint" :span="12" :offset="6">
              <canvas  id="mycanvas"></canvas>
          </el-col>
      </el-row>
      
   
     
  </div>
</template>


<script>

  import bwipjs from 'bwip-js' 
  import base from '@/utils/base64'  //引入
  import {disposeDict} from '@/utils/dicts'
  export default {
      name: "count_to",
      components: {
        
      },
      data() {
          return {
              basic:{
                  codetype:disposeDict('codetype','arr'),
              },
              selcodetype:'',
              printObj:{
                id:'myPrint',
                popTitle:'生成条码'
              },
              form: {
                  projectName: '',
                  region: '',
                  date1: '',
                  date2: '',
                  delivery: false,
                  type: [],
                  resource: '',
                  desc: ''
                  }
          }
      },
      created(){
          console.log(disposeDict('codetype','obj'))
          console.log(disposeDict('facType','obj'))

      },
      computed: {
          // 返回自定义样式
          getClass() {
              return ['count-to-number']
          }
      },
      mounted(){


//  this.createPdf(PDF417)
      },
      methods: {
        
          submitForm(formName) {
              this.$refs[formName].validate((valid) => {
              if (valid) {
                  alert('submit!');
              } else {
                  console.log('error submit!!');
                  return false;
              }
              });
          },
          resetForm(formName) {
              this.$refs[formName].resetFields();
          },
          removeDomain(item) {
              var index = this.dynamicValidateForm.domains.indexOf(item)
              if (index !== -1) {
              this.dynamicValidateForm.domains.splice(index, 1)
              }
          },
          addDomain() {
              this.dynamicValidateForm.domains.push({
              value: '',
              key: Date.now()
              });
          },
          createPDF417(){
              let data=this.form
              let _this=this
              console.log(data)
              console.log(JSON.stringify(data))

              //生成pdf417
              let canvas = bwipjs.toCanvas('mycanvas', {
                  
                  bcid:        _this.selcodetype?_this.selcodetype:'pdf417',       // Barcode type
                  text:        JSON.stringify(data),    // Text to encode
                  scale:       _this.selcodetype=='qrcode'?3:3,               // 3x scaling factor
                  height:      _this.selcodetype=='qrcode'?30:10,              // Bar height, in millimeters
                  includetext: true,            // Show human-readable text
                  textxalign:  'center',        // Always good to set this
              });
          },
          

      }
  }
</script>
<style scoped>
body{
      font-size: 24px;
}
.el-input{
  width: 70%;
}
  .count_class {
      margin-top: 50px;
      margin-bottom: 50px;
  }

  .count-to-number {
      font-size: 8em;
      color: #4d63bc;
      font-weight: 300;
  }

  .prefix-style {
      font-size: 2em;
  }
</style>
